<template>
	<view role="dialog" aria-modal="true" class="fade modal-container  show" tabindex="-1" style="display: block;">
		<view class=" modal-dialog-centered  modal-fullscreen" style="display: flex;flex-direction: column;">
			<!-- <view class="modal-content">
				<view class="modal-header" style="display: flex; flex-direction: column;"><button class="left"
						type="button" data-dismiss="modal" @click="back" aria-label="Close"><svg
							xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none">
							<path
								d="M6.67783 1.26902C7.28532 0.723479 8.27024 0.723479 8.87772 1.26902C9.4852 1.81455 9.4852 2.69905 8.87772 3.24458L3.75544 7.84455L8.87772 12.4445C9.4852 12.99 9.4852 13.8745 8.87772 14.4201C8.27024 14.9656 7.28532 14.9656 6.67783 14.4201L0.455612 8.83233C-0.151871 8.28679 -0.151871 7.4023 0.455612 6.85676L6.67783 1.26902Z"
								fill="#C1D1FF"></path>
						</svg></button><span class="title">{{$t('Reward_record')}}</span>

				</view> -->
			<u-subsection :isHistory="true" :list="list" :current="curNow" @change="sectionChange" activeColor="#f1c594"
				bgColor="#00000000" inactiveColor="#fff" style="padding: 0 20rpx;margin-top: 30rpx;">></u-subsection>
			<view class="modal-body">




				<view class="col-12  col " style="display: flex;align-items: center; flex-direction: column;">
					<u-button type="warning" size="large" @click="goTransfer" v-if="account_type=='2'"
						style="width: 30%; text-align: center;height: 70rpx;line-height: 70rpx;">{{$t('Transfer_money')}}</u-button>
					<view style="margin-top: 20rpx;">
						<!-- <view class="m-0 row"> -->

						<view class="col-12 p-0 col">
							<view class="card-history mt-2 card" style="margin:0 20rpx;min-width: 700rpx;"
								v-for="(item,index) in memberOrderList" :key="index">
								<view class="history-container">
									<view style="padding: 0.5em 0.3em;">
										<view class="m-0 border-bottom align-items-center row">
											<view class="col"><label>{{item['create_time']}}</label></view>
											<view class="text-center col"><label>{{$t('buy_num')}}
													<br>{{item['number']}}</label>
											</view>
											<view class="text-center col"><label>{{$t('Description')}}
													<br>{{item['text']}}</label>
											</view>

										</view>
									</view>
								</view>
							</view>
							<view class="uni-pagination-box" v-if="memberOrderList.length>0" style="margin-top: 20rpx;">
								<UniPagination :page-size="pageSize" :current="pageIndex" :total="total"
									@change="change" />
							</view>
						</view>
					</view>
				</view>

				<view v-if="memberOrderList.length==0">
					<view class="listing-container">
						<view class="d-flex justify-content-center m-0 row">
							<view class="w-auto pt-5 pb-5 mt-5 mb-5 d-grid"><span
									class="text-center text-empty pt-3">{{$t('No_record')}}</span>
							</view>
						</view>
					</view>
				</view>
				<!-- <u-loadmore v-show="loadn&&memberOrderList.length>0" v-text="loadText" :status="status"
					class="my-loadmore"></u-loadmore> -->
			</view>
		</view>
	</view>
	</view>

</template>


<script>
	import UniPagination from "@/components/UniPagination.vue"
	export default {
		components: {

			UniPagination
		},
		onLoad: function(options) {

		},
		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				this.getMemberList();
				this.setTitle()
			}
		},
		data() {
			return {
				pageSize: 20,
				list: [
					this.$t('Direct_referral_reward'),
					this.$t('Management_reward'),
					this.$t('Dividend_bonus'),
					this.$t('Parallel_reward'),
					this.$t('Month_reward'),
					// this.$t('Node_reward'),
				],
				pageIndex: 1,
				memberOrderList: [],
				status: 'loading',
				loadText: '',
				account_type: '',
				loadn: false,
				curNow: 0,
				money: "",
				top: 0, //标题图标距离顶部距离
				opacity: 0,
				scrollTop: 0.5,
				productList: [],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				type: '',
				show: false,
				columnData: [
					['BNB Smart Chain (BEP20)', 'Tron (TRC20)']
				],
				chain: 'BNB Smart Chain (BEP20)',
				caddress: 'TUvZTt771K1ZjuqqCon1em3MAdvWoPrRx5',
				from_type: '15'
			}
		},
		methods: {
			recharge() {

			},
			change(e) {
				// this.$refs.table.clearSelection()
				this.pageIndex = e.current
				this.getMemberList(e.current)
			},
			setTitle() {
				uni.setNavigationBarTitle({
					title: this.$t('Reward_record')
				});
			},
			back() {
				uni.navigateBack()
			},
			sectionChange(index) {
				this.curNow = index
				this.pageIndex = 1
				this.loadn = false
				this.memberOrderList = []
				switch (index) {
					case 0:
						this.from_type = '15'
						break
					case 1:
						this.from_type = '16'
						break
						break
					case 2:
						this.from_type = '13'
						break
					case 3:
						this.from_type = '18'
						break
						case 4:
							this.from_type = '20'
							break
				}
				this.getMemberList()
			},
			getMemberList() {
				let boxData = {
					page: this.pageIndex,
					account_type: 2,
					from_type: this.from_type
				};
				let memberOrder = this.tui.request('/api/user/bill', 'post', boxData, 1000, 1, '',
					'bill');
				Promise.resolve(memberOrder).then((value) => {
					if (value.code == 200) {
						this.memberOrderList = value.data.data
						this.total = value.data.total_count
						// if(this.pageIndex == 1) {
						// 	this.memberOrderList = value.data.data
						// } else {
						// 	this.memberOrderList = this.memberOrderList.concat(value.data.data)
						// }

						// if (this.pageIndex < value.data.page_count) {
						// 	this.loadText = this.$t('load_more')
						// 	this.pageIndex++

						// } else {
						// 	this.loadText = this.$t('Have_end')
						// 	this.loadn = true
						// }

					}
				})
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.show = false
			}

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},
		onReachBottom: function() {
			if (this.loadn) {
				return
			}
			// this.getMemberList()
		},

	}
</script>

<style scoped lang="scss">
	page {
		min-height: 100%;
		background-color: #252C46;
	}

	.recharge_btn {
		background: rgba(193, 209, 255, .2) !important;
		border-right: none;
		border-bottom: none;
		border-radius: 15px;
		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
		color: var(--Light-Blue-Solid) !important;
		font-size: 12px;
		height: 48px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	// .u-subsection--button__bar {
	// 	background-color: #5A6487;
	// 	border-radius: 16px !important;
	// }
</style>